<template>
  <el-form
    ref="form"
    :model="formData"
    :rules="rules"
    label-width="80px"
    :size="defaultFormItemSize"
    label-position="right"
    @submit.native.prevent
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formData.roleName" placeholder="角色名称" clearable maxlength="30" />
        </el-form-item>
        <el-form-item v-if="false" label="角色类型" :required="true">
          <el-radio-group v-model="formData.adminRole">
            <el-radio :label="1">管理员</el-radio>
            <el-radio :label="0">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-card shadow="never">
          <div slot="header" class="card-header">
            <span>菜单权限</span>
            <el-input
              :size="defaultFormItemSize"
              v-model="menuNameFilter"
              placeholder="输入菜单名称过滤"
              style="width: 250px"
              clearable
              suffix-icon="el-icon-search"
            />
          </div>
          <el-scrollbar style="height: 230px" wrap-class="scrollbar_dropdown__wrap">
            <el-tree
              ref="authTree"
              :data="authData"
              :props="treeProps"
              :check-strictly="false"
              show-checkbox
              node-key="menuId"
              :filter-node-method="filterMneuNode"
            >
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹窗下发按钮栏，必须设置class为dialog-btn-layer -->
    <el-row type="flex" justify="end" class="dialog-btn-layer" style="margin-top: 20px">
      <el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button
        type="primary"
        :size="defaultFormItemSize"
        @click="onSubmit"
        :disabled="
          !(
            checkPermCodeExist('formSysRole:fragmentSysRole:update') ||
            checkPermCodeExist('formSysRole:fragmentSysRole:add')
          )
        "
      >
        确定
      </el-button>
    </el-row>
  </el-form>
</template>

<script>
import { treeDataTranslate, findItemFromList } from '@/utils';
import { SystemController } from '@/api';

export default {
  props: {
    rowData: {
      type: Object
    }
  },
  data() {
    return {
      menuNameFilter: undefined,
      formData: {
        roleId: undefined,
        roleName: undefined,
        adminRole: false,
        menuIdListString: undefined
        /*
        permsJsonData: {
          checked: [],
          halfChecked: [],
        },
        */
      },
      rules: {
        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      },
      treeProps: {
        label: 'menuName'
      },
      authData: [],
      allowParentList: []
    };
  },
  methods: {
    filterMneuNode(value, data) {
      if (!value) return true;
      if (data.menuName.indexOf(value) !== -1) {
        this.allowParentList.push(data.menuId);
        return true;
      } else {
        return this.allowParentList.indexOf(data.parentId) !== -1;
      }
    },
    onCancel(isSuccess = false) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let selectMenu = [];
          selectMenu = this.$refs.authTree.getHalfCheckedKeys();
          selectMenu = selectMenu.concat(this.$refs.authTree.getCheckedKeys());

          if (selectMenu.length <= 0) {
            this.$message.error({ message: '请选择角色的菜单权限', showClose: true });
            return;
          }
          let params = {
            sysRoleDto: { ...this.formData }
          };
          params.menuIdListString = selectMenu.join(',');
          if (this.isEdit) {
            SystemController.updateRole(this, params)
              .then(res => {
                this.$message.success('编辑成功');
                this.onCancel(true);
              })
              .catch(e => {});
          } else {
            SystemController.addRole(this, params)
              .then(res => {
                this.$message.success('添加成功');
                this.onCancel(true);
              })
              .catch(e => {});
          }
        }
      });
    },
    loadAuthData() {
      SystemController.getMenuPermList(this, {})
        .then(res => {
          this.authData = treeDataTranslate(res.data, 'menuId', 'parentId');
          if (Array.isArray(this.formData.menuIdList)) {
            let tempList = [];
            this.formData.menuIdList.forEach(item => {
              let tempMenu = findItemFromList(res.data, item, 'menuId');
              // 判断是否为叶子节点
              if (
                tempMenu != null &&
                (!Array.isArray(tempMenu.children) || tempMenu.children.length <= 0)
              ) {
                tempList.push(item);
              }
            });
            this.$refs.authTree.setCheckedKeys(tempList);
          }
        })
        .catch(e => {});
    }
  },
  computed: {
    isEdit() {
      return this.formData.roleId != null;
    }
  },
  mounted() {
    if (this.rowData) {
      this.formData = { ...this.formData, ...this.rowData };
      if (Array.isArray(this.formData.sysRoleMenuList)) {
        this.formData.menuIdList = this.formData.sysRoleMenuList.map(item => item.menuId);
      }
    }
    this.loadAuthData();
  },
  watch: {
    menuNameFilter(val) {
      this.allowParentList = [];
      this.$refs.authTree.filter(val);
    }
  }
};
</script>

<style></style>
